<template>
	<div class="ui-pane">
		<ui-header headertit="图片弹出框"></ui-header>
		<div class="ui-content">
			<arealine linetit="图片预览组件"></arealine>
			<viewImg :src="src" :isShow="isShow" @closeView="closeImg"></viewImg>
			<div class="flex-center img_box">
				<img v-for="(imgsrc,index) in imglist" :src="imgsrc" @click="showimg(imgsrc)">
			</div>
		</div>
	</div>
</template>

<script>
	import viewImg from '../../../../components/ViewImg.vue'
	export default {
		name: 'home',
		data() {
			return {
				isShow: false,
				imglist: [
					'http://p1.music.126.net/gWTBbLJfla0LT74mwDildA==/109951165477221000.jpg?imageView&quality=89',
					'http://p1.music.126.net/EZCbqP87wGuZ5XcECFRqxg==/109951165477895371.jpg?imageView&quality=89',
					'http://p1.music.126.net/H6sKYEA8-xhhBb8yRkcioA==/109951165477267723.jpg?imageView&quality=89'
				],
				src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1135600071,45544589&fm=26&gp=0.jpg',
			}
		},
		methods: {
			closeModal(isjShow){
			  console.log(isjShow)
			  this.modalIsShow = isjShow;
			},
			showimg(src) {
			  this.src = src;
			  this.isShow = true;
			},
			closeImg(sss) {
			  this.isShow = false;
			  console.log(sss);
			},
		},
		components: {
			viewImg
		}
	}
</script>

<style scoped="scoped">
	.img_box{
		margin: .4rem .25rem 0 .25rem;
		padding: .2rem .25rem;
		background: white;
	}
	
	.img_box img{
		width: calc(100% / 3);
	}
</style>
